<template>
	<view class="content">
		<SearchInout @input='search'>
		</SearchInout>
		<!-- 导航 -->
		<NavList :scrollTop='scrollTop' @click='navClick'></NavList>
		<!-- 视频 -->
		<view class="VideosList margin-20">
			<view class="" style="padding-top:20rpx;" v-for="(item,index) in 10" :key="index">
				<view class="VideosItem">
					<text class="iconfont icon-bofang play"></text>
					<image class="img" src="https://img.js.design/assets/img/643d162c4274fef453c2c327.png" mode="">
					</image>

					<view class="text" v-if="index==0">
						宿主大脑发育程度会不会是关键？
					</view>
					<view class="text" v-if="index==1">
						台湾台南时隔两天再次出现停电事故！逾700户居民没电用。台湾台南时隔两天再次出现停电事故！逾700户居民没电用。台湾台南时隔两天再次出现停电事故！逾700户居民没电用。
					</view>
					<view class="text" v-if="index==2">
						台湾台南时隔两天再次出现停电事故！逾700户居民没电用。
					</view>
					<view class="text" v-if="index==3">
						台湾台南时隔两天再次出现停电事故！逾700户居民没电用。
					</view>
					<view class="text" v-if="index>3">
						台湾台南时隔两天再次出现停电事故！逾700户居民没电用。
					</view>

				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import SearchInout from '../../component/Search/Search.vue'
	import NavList from '../../component/Navlist/Navlist.vue'

	export default {
		components: {
			SearchInout,
			NavList

		},
		data() {
			return {
				navTitle: '',
				scrollTop: '',
			}
		},
		onPullDownRefresh() {
			// uni.stopPullDownRefresh();
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			search(e) {
				console.log(e)

			},
			// 点击菜单
			navClick(e) {
				this.navTitle = e;
				console.log(this.navTitle)
			},
		}
	}
</script>

<style scoped lang="less">
	.content {
		border-top: 1px solid #E0E0E0;

		//视频
		.VideosList {
			column-count: 2; //想要排成的列数
			column-gap: 20rpx;
			padding-bottom: 50rpx;

			.VideosItem {
				border-radius: 20rpx;
				background: #FFFFFF;
				border: 1px solid #E0E0E0;
				box-sizing: border-box;
				break-inside: avoid;
				// margin-top: 20rpx;
				position: relative;

			}

			.play {
				position: absolute;
				color: #fff;
				right: 20rpx;
				top: 20rpx;
				z-index: 99;
			}

			.text {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				text-align: left;
				padding: 20rpx;
			}

			.img {
				width: 100%;
				height: 240rpx;
				border-radius: 20rpx 20rpx 0 0;
				display: block;
				position: relative;

			}

			.img:before {
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.4);
				content: "";
			}
		}

	}
</style>